<template>
    <div class="azm-component-abnor-index">
        <div class="azm-component-abnor-index-box" :class="{'azm-caib-fixed':isFixed}" :style="bgStyle">
            <p class="azm-image">
                <image mode="widthFix" :src="imageSrc"></image>
            </p>
            <p class="azm-title">{{titleTxt}}</p>
            <p class="azm-tip">{{tipTxt}}</p>
            <p v-if="buttonTxt" style="margin-top: .16em">
                <button color="error" small @click="onConfirm">{{buttonTxt}}</button>
            </p>
        </div>
    </div>
</template>

<script>
    import Config from './config'

    export default {
        components: {},
        name: 'tl-abnor',
        computed: {
            imageSrc () {
                const image = this.image;
                if (!this.$util.jude.isEmpty(image)) {
                    return image
                } else if (this.type && Config[this.type]) {
                    return Config[this.type].image
                }
            },
            titleTxt () {
                const title = this.title;
                if (!this.$util.jude.isEmpty(title)) {
                    return title
                } else if (this.type && Config[this.type]) {
                    return Config[this.type].title
                }
            },
            tipTxt () {
                const tip = this.tip;
                if (!this.$util.jude.isEmpty(tip)) {
                    return tip
                } else if (this.type && Config[this.type]) {
                    return Config[this.type].tip
                }
            },
            buttonTxt () {
                const button = this.button;
                if (!this.$util.jude.isEmpty(button)) {
                    return button
                } else if (this.type && Config[this.type]) {
                    return Config[this.type].button
                }
            },
            bgStyle () {
                const style = this.myStyle;
                if (typeof style === "string") {
                    return style
                } else if (!this.$util.jude.isEmptyObject(style, true)) {
                    return this.$util.object2style(style)
                }
            }
        },
        props: {
            type: String,
            image: String,
            title: String,
            button: String,
            tip: String,
            isFixed: Boolean,
            myStyle: {
                type: [String, Object],
                default: v => v
            }
        },
        data () {
            return {
                message: ''
            }
        },
        created () {
        },
        methods: {
            onConfirm (e) {
                this.$emit('btnTap', e)
            }
        }
    }
</script>

<style scoped lang="scss">
    .azm-component-abnor-index {
        position: relative;
        top: 0;
        left: 0;
        margin: 12px 15px;

        .azm-component-abnor-index-box {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 50px 0;
            background-color: #fff;
            border-radius: 5px;

            &.azm-caib-fixed {
                position: fixed;
                top: 35%;
                left: 50%;
                transform: translateX(-50%);
                z-index: 100;
            }

            > p {
                text-align: center;
            }

            .azm-title {
                margin-top: 12px;
                font-size: 14px;
                color: #2F2F2F;
            }

            .azm-tip {
                font-size: 12px;
                color: #666;
            }

            .azm-image {
                image {
                    width: 20%;
                    margin-top: 20px;
                    height: auto;
                }
            }
        }

    }
</style>
<style lang="less">
    .azm-component-abnor-index {
    }
</style>
